import Vue from "vue";
import App from "./App.vue";
import elementUI from "element-ui";
import VueRouter from "vue-router";
import store from "./store";
import Vuex from "vuex";
import router from "./router";
import Api from "./api";
import "echarts";
import "./styles/elementui-variables.scss";
import "font-awesome/css/font-awesome.min.css";

declare module "vue/types/vue" { 
  interface Vue {
    $api: any;
    $ops: any;
    $appname: string;
    $modules: any;
    $SysConfig: any;
    $user: any;
  }
}

Vue.config.productionTip = false;
Vue.config.silent = true;

(elementUI.Dialog as any).props.closeOnClickModal.default = false;

Vue.use(elementUI);
Vue.use(VueRouter);     
Vue.use(Vuex);
// Vue.use(QuillEditor);

Vue.prototype.$api = new Api(router);
Vue.prototype.$fmtDate = (date: any) => {
  // 年月日
  const newData: any = new Date(date * 1000);
  const yearStr = newData.getFullYear();
  const month = newData.getMonth() + 1;
  const monthStr = month < 10 ? `0${month}` : `${month}`;
  const day = newData.getDate();
  const dayStr = day < 10 ? `0${day}` : `${day}`;
  const hours = newData.getHours();
  const hoursStr = hours < 10 ? `0${hours}` : `${hours}`;
  const minutes = newData.getMinutes();
  const minutesStr = minutes < 10 ? `0${minutes}` : `${minutes}`;
  const seconds = newData.getSeconds();
  const secondsStr = seconds < 10 ? `0${seconds}` : `${seconds}`;

  return `${yearStr}-${monthStr}-${dayStr}  ${hoursStr}:${minutesStr}:${secondsStr}`;
};

Vue.prototype.$secToMin = (seconds: number) => {
  if (seconds) {
    return (seconds / 60).toFixed();
  }

  return "";
};

Vue.prototype.$fmtSec = (seconds: any) => {
  let h: any = 0;
  let m: any = 0;
  const s: any = 0;

  if (seconds > 60) {
    m = (seconds / 60).toFixed();
    seconds = (seconds % 60).toFixed();
    if (m > 60) {
      h = (m / 60).toFixed();
      m = (m % 60).toFixed();
    }
  }

  return `${h}:${m}:${s}`;
};

Vue.prototype.$coinToYuan = (coin: any) => {
  if (coin < 0) {
    return "";
  }
  return (Math.round((coin / 100) * 10000) / 10000).toFixed(2);
};

Vue.prototype.$toDefaultRoute = () => {
  router.push({ path: "/trading" });
};

Vue.prototype.$appname = "能源区块链交易平台";

router.beforeEach((to: any, from: any, next: any) => {
  const user = JSON.parse(localStorage.getItem("userInfo") as any);
  const userRole: string = user && user.type;
  if (
    to.path !== "/" &&
    to.path !== "/login" &&
    to.name !== "404" &&
    to.matched[0].meta.isAdmin &&
    ((userRole === "grid" && to.matched[0].meta.isAdmin !== 1) ||
      ((userRole === "cunsumer" || userRole === "prosumer") &&
        to.matched[0].meta.isAdmin !== 2))
  ) {
    next({ name: "404" });
  } else if (to.path === "/login") {
    next();
  } else {
    next();
    // const ops: any = Vue.prototype.$ops;
    // const toModule: any = to.matched[0];
    // const toView: any = to.matched[1];
    // if (ops && store.state.admin) {
    //   const targetModule: any = ops.find((op: any) => {
    //     return op.module === toModule.meta.operations;
    //   });
    //   if (targetModule) {
    //     const targetView: any = targetModule.views.find((view: any) => {
    //       return view.view === toView.meta.operations;
    //     });

    //     targetView && targetView.isMine ? next() : Vue.prototype.$message.warning('您没有权限查看');
    //   }
    // } else {
    //   next();
    // }
  }
});

Vue.prototype.$eventbus = new Vue();

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");
